<template>
  <div class="reg">
    <Header title="注册账号" :back="true"> </Header>
    <van-form>
      <van-field
        label-width="30px"
        label
        left-icon="phone-o"
        v-model="regInfo.username"
        name="username"
        placeholder="请输入手机号"
        clearable
        :rules="[
          {
            required: true,
            message: '请填写手机号',
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/
          }
        ]"
      />
      <van-field
        v-model="regInfo.password"
        :type="type"
        name="password"
        placeholder="请输入密码"
        left-icon="bag-o"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #button>
          <i
            class="iconfont closeeye"
            @click="type = 'text'"
            v-if="type === 'password'"
            >&#xe611;</i
          >
          <i
            class="iconfont openeye"
            @click="type = 'password'"
            v-if="type === 'text'"
            >&#xe60f;</i
          >
        </template>
      </van-field>
      <van-field
        v-model="regInfo.password2"
        :type="type1"
        name="password2"
        placeholder="请确认密码"
        left-icon="bag-o"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #button>
          <i
            class="iconfont closeeye"
            @click="type1 = 'text'"
            v-if="type1 === 'password'"
            >&#xe611;</i
          >
          <i
            class="iconfont openeye"
            @click="type1 = 'password'"
            v-if="type1 === 'text'"
            >&#xe60f;</i
          >
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="regSubmit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      type: "password",
      type1: "password",
      regInfo: {
        username: "",
        password: "",
        password2: ""
      }
    };
  },
  methods: {
    async regSubmit() {
      if (this.regInfo.password !== this.regInfo.password2)
        return this.$notify({ type: "danger", message: "密码不一致" });
      let res = await this.$axios.post("User/reg", this.regInfo);
      if (res.data.statue !== 1)
        return this.$notify({ type: "danger", message: res.data.msg });
      this.$notify({ type: "success", message: "注册成功" });
    }
  }
};
</script>

<style lang="less" >
.reg {
  .ct {
    color: #333333;
    font-weight: 400;
    font-family: PingFang-SC-Bold;
  }

  .header .lt[data-v-61dd7a3d] {
    transform: translateY(50%);
    margin-left: 24px;
  }
  .van-form {
    display: flex;
    margin-top: 60px;
    flex-direction: column;
    align-items: center;
    .van-field__button {
      width: 36px;
      height: 20px;
      margin-right: 30px;
      .iconfont {
        font-size: 50px;
        display: inline-block;
        width: 36px;
        height: 20px;
      }
    }
  }
  .van-button--round {
    width: 500px;
    height: 60px;
    border-radius: 10px;
    margin-top: 50px;
    border: 0;
    background-color: #ff4f02;
  }
}
</style>
